<template>
  <page-container>
    <h2>封装版 wangEditor（零配置使用）</h2>

    <RichEditor v-model="content" ref="editorRef" />

    <div style="margin-top: 16px; display: flex; gap: 8px">
      <el-button @click="() => editorRef?.focus()">聚焦</el-button>
      <el-button @click="() => editorRef?.blur()">失焦</el-button>
      <el-button @click="dumpHtml">打印 HTML</el-button>
      <el-button @click="setDemoHtml">填充示例内容</el-button>
      <el-button @click="toggleReadonly">
        {{ readonly ? '取消只读' : '设为只读' }}
      </el-button>
    </div>

    <el-divider />
    <el-input v-model="content" type="textarea" :rows="8" />
  </page-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import RichEditor from '../components/wangEditor.vue'

const content = ref('')
const readonly = ref(false)
const editorRef = ref<InstanceType<typeof RichEditor> | null>(null)

function dumpHtml() {
  console.log('HTML:', editorRef.value?.getHtml())
}
function setDemoHtml() {
  editorRef.value?.setHtml('<h3>演示</h3><p>这是一段通过 <code>setHtml()</code> 设置的内容。</p >')
}
function toggleReadonly() {
  readonly.value = !readonly.value
  editorRef.value?.setReadOnly(readonly.value)
}
</script>
